<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>收集表单数据</title>
</head>

<body>
    <!-- 
        收集表单数据
            若：<input type="text" />  则用v-model收集的时value值  用户输入的就是value值
            若：<input type="radio" />  则用v-model收集的时value值 并且给标签配置value值
            若：<input type="checkbox" />
                1.没有配置input的value属性 ，那么收集的就是 checkbox（勾选为 true 不勾选为 false）
                2.配置inputvalue属性：
                    1.v-model的初始值是非数组，那么收集的就是checkbox（勾选 or 不勾选 ，是布尔值）
                    2.v-model的初始值是数组，那么收集的就是value值组成的数组
            备注：v-model的三个修饰符
                lazy：失去焦点再收集数据
                number：输入字符串转为数字
                trim：输入首位空格过滤
     -->
    <div id="root">
        <form @submit.prevent="comit">
            账号:<input type="text" v-model.trim="userinfor.account">
            <hr> 密码:
            <input type="text" v-model="userinfor.password">
            <hr> 年龄:
            <input type="number" v-model.number="userinfor.age">
            <hr> 性别: 男
            <input type="radio" v-model="userinfor.sex" name="sex" value="nan"> 女
            <input type="radio" v-model="userinfor.sex" name="sex" value="nv">
            <hr> 爱好： 抽烟 <input type="checkbox" v-model="userinfor.hoddy" value="chouyan"> 喝酒 <input type="checkbox" v-model="userinfor.hoddy" value="hejiu"> 烫头 <input type="checkbox" v-model="userinfor.hoddy" value="tangtou">
            <hr> 校区
            <select v-model="userinfor.city">
                <option value="">请选择校区</option>
                <option value="shanghai">上海</option>
                <option value="beijing">北京</option>
                <option value="tianjin">天津</option>

            </select>
            <hr> 其他信息
            <textarea v-model.lazy="userinfor.other"></textarea>
            <hr>
            <input type="checkbox" v-model="userinfor.read"></input>阅读并接受 <a href="https:www.baidu.com">《用户协议》</a>
            <hr>
            <button>提交</button>
        </form>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                userinfor: {
                    account: '',
                    password: '',
                    age: '',
                    sex: '',
                    hoddy: [],
                    other: '',
                    city: 'shanghai',
                    read: ''
                }

            },
            methods: {
                comit() {
                    // alert(1)
                    console.log(JSON.stringify(this.userinfor))
                }
            },
        })
    </script>
</body>

</html>